<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>无尽模式</title>
    <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }

        button{
            outline: none;
            border: none;
        }
        #welcomeDv{
            background-color: #b1a799;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #welcomeContent{
            background-color: #ececec;
            box-shadow: 20px 20px 5px #b8b1a9;
            width: 500px;
            height: 750px;
            margin: 70px auto 0;
            padding-top: 50px;
        }
        #welcomeInform{
            margin: 0 auto;
            width: 500px;
            height: 400px;
        }
        #welcomeText{
            width: 500px;
            text-align: center;
            height: 100px;
            font-size: 4em;
            color: #b9a478;
        }
        #highestRecordingDv{
            margin: 30px auto 0;
            width: 500px;
            text-align: center;
            height: 50px;
            font-size: 2em;
            color: #92473a;
        }
        #nowRecordingDV{
            margin: 20px auto 0;
            width: 500px;
            text-align: center;
            height: 50px;
            font-size: 2em;
            color: #92473a;
        }
        #welcomeBtnS{
            margin: 0 auto;
            width: 350px;
            height: 300px;
        }
        .btnType{
            border-radius:20px;
            background-color: #957252;
            color: #d8c09c;
            font-size: 2.5em;
            cursor: pointer;
        }
        .welcomeBtn{
            width: 350px;
            height: 75px;
        }





        #endlessStartDv{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }
        #headPartDv{
            padding-top: 30px;
            margin:0 auto;
            width: 1000px;
            height: 120px;
        }
        #userImageDv{
            margin-left: 20px;
            float: left;
            width: 80px;
            height: 80px;
            border-radius: 100%;
        }
        .userImage{
            width: 80px;
            height: 80px;
            border-radius: 100%;
        }
        #CheckupDv{
            background-color: black;
            color: white;
            padding-top: 5px;
            margin: 20px 0 0 50px;
            float: left;
            width: 150px;
            height: 35px;
            text-align: center;
            font-size: 1.5em;
        }
        #timeDv{
            padding-top: 25px;
            margin:-20px auto 0;
            width: 120px;
            height: 95px;
            border-radius: 100%;
            color: white;
            text-align: center;
        }
        #leaveModeDv{
            margin: -90px 20px 0 0;
            float: right;
        }
        #leaveMode{
            cursor: pointer;
            width: 160px;
            height: 40px;
            font-size: 1.5em;
        }
        #frequencyDv{
            margin-left: -75px;
            position: absolute;
            border-top-left-radius:20px;
            border-bottom-left-radius:20px;
            float: left;
            background: rgba(255, 255, 255, 0.4);
            width: 75px;
            height: 300px;
            color: white
        }
        .heartPhoto{
            margin-top: 10px;
            margin-bottom: 15px;
            width: 75px;
            height: 75px;
        }
        #propsDv{
            border-top-left-radius:20px;
            border-bottom-left-radius:20px;
            position: absolute;
            float: left;
            margin-top: 500px;
            margin-left: -80px;
            height: 250px;
        }
        #pullOutDv{
            position: absolute;
            border-style: solid;
            margin: 110px 0 0 -15px;
            border-width: 20px 15px 20px 0;
            border-color: transparent rgb(138, 201, 106) transparent transparent;
            width: 0;
            height: 0;
            cursor: pointer;
        }

        #propPart1{
            border-top-left-radius:20px;
            border-bottom-left-radius:20px;
            float: left;
            width: 80px;
            height: 250px;
            background: rgba(255, 255, 255, 0.4);
        }

        #propPart2{
            float: left;
            width: 0;
            height: 250px;
            background: rgba(255, 255, 255, 0.4);
            overflow: hidden;
        }

        .prop{
            cursor: pointer;
            margin:25px auto 0;
            width: 50px;
            height: 50px;
        }
        .propPhoto{
            width: 50px;
            height: 50px;
            border-radius: 100%;
        }
        .propNumber{
            border-radius: 100%;
            background-color: white;
            width: 18px;
            height: 18px;
            color: black;
            margin: -12px 0 0 37px;
            font-size: 1.2em;
            text-align: center;
        }
        #TreasureDv{
            margin: 25px -100px 0 0;
            float: right;
            width: 50px;
            height: 710px;
        }

        #TreasureProgressDv{
            background-color: white;
            width: 30px;
            height: 650px;
            border-top-right-radius:20px ;
            border-top-left-radius: 20px;
            position: relative;
            margin: 0 auto;
        }

        #TreasureProgress{
            border-top-right-radius:15px ;
            border-top-left-radius: 15px;
            width: 30px;
            height: 20%;
            background-color: #f19243;
            position: absolute;
            bottom: 0;
        }
        .TreasurePhoto{
            width: 50px;
            height: 50px;
        }





        #contentDv{
            margin: 0 auto;
            width: 1000px;
            height: 750px;
            border: 1px solid black;
        }
        #questionDv{
            border-radius: 20px;
            background: rgba(165, 165, 167, 0.6);
            color: white;
            padding: 70px 50px 0 50px;
            margin: 40px auto 0;
            width: 600px;
            height: 130px;
            text-align: center;
            font-size: 1.5em;
        }
        #answersDv{
            margin: 50px auto 0;
            width: 700px;
            height: 450px;
        }
        .answerDV{
            margin-bottom: 40px;
            margin-left: 150px;
            width: 400px;
            height: 75px;
        }
        .answerBtn{
            border-radius: 20px;
            background: rgba(165, 165, 167, 0.6);
            color: white;
            width: 400px;
            height: 75px;
            font-size: 2em;
            text-align: center;
            cursor: pointer;
        }


        #CoverFloor{
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 2;
        }


        #MsgDv{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #Msg{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -125px;
            margin-top: -150px;
            width: 250px;
            height: 150px;
        }

        #MsgTip1Dv{
            text-align: center;
            margin: 0 auto;
            width: 150px;
            height: 50px;
        }

        #MsgPictureDv{
            width: 100px;
            height: 100px;
            margin-left: 75px;
            border-radius: 20px;
        }

        .MsgPicture{
            width: 100px;
            height: 100px;
        }

        #MsgNumberDv{
            text-align: center;
            margin: 10px auto 0;
            width: 100px;
            height: 30px;
        }

        #MsgTip2Dv{
            text-align: center;
            margin: 50px auto 0;
            width: 250px;
            height: 50px;
        }



        #welcomeContent{
            background: url("/img/welcomeback.jpg");
        }
        #endlessStartDv{
            background: url("/img/endlessbig.jpg");
        }
        #timeDv{
            background: url("/img/clock.jpg");
        }
        #contentDv{
            background: url("/img/endlessback.jpg");
        }
    </style>
</head>
<body>
<div id="welcomeDv">
    <div id="welcomeContent">
        <div id="welcomeInform">
            <div id="welcomeText">
                <b>无尽模式</b>
            </div>
            <div id="highestRecordingDv">
                <span>您最高记录为:</span>
                <span id="highestRecording" style="color: #d8c09c"></span>
                <span>关</span>
            </div>
            <div id="nowRecordingDV">
                <span>当前关卡为:</span>
                <span id="nowRecording" style="color: #d8c09c"></span>
                <span>关</span>
            </div>
        </div>
        <div id="welcomeBtnS">
            <div>
                <button id="start" class="btnType welcomeBtn"></button>
            </div>
            <div style="margin-top: 50px">
                <button id="leave" class="btnType welcomeBtn">退&nbsp;&nbsp;&nbsp;&nbsp;出</button>
            </div>

        </div>
    </div>
</div>

<div id="endlessStartDv">
    <div id="headPartDv">
        <div id="userImageDv">
            <img id="userImage" src="img/haijianshua.jpg" alt="" class="userImage">
        </div>
        <div id="CheckupDv">
            <span>第</span><span id="Checkup"></span><span>关</span>
        </div>
        <div id="timeDv">
            <b id="countdown" style="font-size: 4em"></b>
            <span style="font-size: 2em">秒</span>
        </div>
        <div id="leaveModeDv">
            <button id="leaveMode">中断挑战</button>
        </div>
    </div>

    <div id="contentDv">
        <div id="frequencyDv">
            <div id="frequency"></div>
        </div>

        <div id="propsDv">
            <div id="propPart1">
                <div id="pullOutDv"></div>
                <div id="prop1Dv" class="prop">
                    <img id="Delay" src="" alt="" class="propPhoto">
                    <div id="DelayNumberDv" class="propNumber">
                        <b id="DelayNumber"></b>
                    </div>
                </div>
                <div id="prop2Dv" class="prop">
                    <img id="AddBlood" src="" alt="" class="propPhoto">
                    <div id="AddBloodNumberDv" class="propNumber">
                        <b id="AddBloodNumber"></b>
                    </div>
                </div>
                <div id="prop3Dv" class="prop">
                    <img id="JumpCheckup" src="" alt="" class="propPhoto">
                    <div id="JumpCheckupNumberDv" class="propNumber">
                        <b id="JumpCheckupNumber"></b>
                    </div>
                </div>
            </div>
            <div id="propPart2">
                <div id="prop4Dv" class="prop">
                    <img id="FullBlood" src="" alt="" class="propPhoto">
                    <div id="FullBloodNumberDv" class="propNumber">
                        <b id="FullBloodNumber"></b>
                    </div>
                </div>

                <div id="prop5Dv" class="prop" style="margin-bottom: 25px">
                    <img id="Resurrection" src="" alt="" class="propPhoto">
                    <div id="ResurrectionNumberDv" class="propNumber">
                        <b id="ResurrectionNumber"></b>
                    </div>
                </div>
            </div>

        </div>

        <div id="TreasureDv">
            <div style="height: 50px;width: 50px;margin: 0 auto">
                <img src="img/Treasure.png" alt="" class="TreasurePhoto">
            </div>
            <div id="TreasureProgressDv">
                <div id="TreasureProgress"></div>
            </div>
        </div>

        <div id="questionDv">
            <span id="question"></span>
        </div>
        <div id="answersDv">
            <div id="answer1Dv" class="answerDV">
                <button class="answerBtn" value="A">
                    <span>A.</span>
                    <span id="answer1"></span>
                </button>
            </div>
            <div id="answer2Dv" class="answerDV">
                <button class="answerBtn" value="B">
                    <span>B.</span>
                    <span id="answer2"></span>
                </button>
            </div>
            <div id="answer3Dv" class="answerDV">
                <button class="answerBtn" value="C">
                    <span>C.</span>
                    <span id="answer3"></span>
                </button>
            </div>
            <div id="answer4Dv" class="answerDV">
                <button class="answerBtn" value="D">
                    <span>D.</span>
                    <span id="answer4"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<audio id="music" controls hidden>
    <source src="audio/ez.mp3">
</audio>
<div id="CoverFloor"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script>
    var questionId,heart;
    var timeDown;
    var answerType=0,propDvType=0,progressNumber=1,TreasureType=0;

    welcomeShow();

    $('#start').click(function () {
        questionShow();
        $('#welcomeContent').slideUp(400);
        $('#welcomeDv').fadeOut(600);
        $('#endlessStartDv').fadeIn(800);
    })

    $('#leave').click(function () {
        answerType=1;
        location.href='user_index.html'
    })

    $('#leaveMode').click(function () {
        let confirm1=layer.confirm('是否确定中断挑战（将会保存当前记录）', {
                title:'离开',btn: ['确定','返回'],anim:1,resize:false
            },function () {
                answerType=1;
                $.ajax({
                    url: '/endless-info/timeOut',
                    method: 'POST',
                    contentType: 'application/json',
                    data:JSON.stringify({
                        userId:sessionStorage.getItem('userId'),
                        nowTime:timeDown
                    }),
                    success: function (res) {
                        layer.msg(res.msg,{time:1500},function () {
                            welcomeShow();
                            $('#welcomeContent').slideDown(600);
                            $('#welcomeDv').fadeIn(800);
                            $('#endlessStartDv').fadeOut(400);
                            layer.close(confirm1);
                        })
                    }
                })
            }
            ,function(){
                layer.close(confirm1);
            })

    })

    $('.answerBtn').click(function () {
        $('#CoverFloor').css('display','block')
        let answer=$(this).val();
        TOrF(answer);
    })

    $('#pullOutDv').click(function () {
        PullOut();
    })

    $('#prop1Dv').click(function () {
        if ($('#DelayNumber').text()==='0'){
            layer.msg('道具数量为零，无法使用')
        }
        else {
            if (timeDown<40){
                let confirm2=layer.confirm('是否使用加时卡(可以增加60秒答题时间)', {
                        title:'道具卡使用',btn: ['确定','取消'],anim:1,resize:false
                    },function () {
                        useProp($('#prop1Dv').val());
                        returnTime(60);
                        layer.close(confirm2);
                    }
                    ,function(){
                        layer.close(confirm2);
                    })
            }
            else {
                layer.msg('您的时间大于40秒，足够充裕，无需使用')
            }
        }
    })

    $('#prop2Dv').click(function () {
        if ($('#JumpCheckupNumber').text()==='0'){
            layer.msg('道具数量为零，无法使用')
        }
        else {
            answerType=1
            let confirm4=layer.confirm('是否使用跳关卡(可以跳过该关)', {
                    title:'道具卡使用',btn: ['确定','取消'],anim:1,resize:false
                },function () {
                    let goodsId=$('#prop3Dv').val();
                    $.ajax({
                        url: '/bag-content/usePropsOfLevel',
                        method: 'POST',
                        contentType: 'application/json',
                        data:JSON.stringify({
                            userId:sessionStorage.getItem('userId'),
                            goodsId:goodsId
                        }),
                        success: function () {
                            propShow();
                            questionShow();
                        }
                    })
                    layer.close(confirm4);
                }
                ,function(){
                    answerType=0;
                    layer.close(confirm4);
                })
        }
    })

    $('#prop3Dv').click(function () {
        if ($('#AddBloodNumber').text()==='0'){
            layer.msg('道具数量为零，无法使用')
        }
        else {
            if (heart===3){
                layer.msg('您的血量健康，无需使用加血卡')
            }
            else if (heart<3){
                let confirm3=layer.confirm('是否使用强心剂(可以恢复一滴血)', {
                        title:'道具卡使用',btn: ['确定','取消'],anim:1,resize:false
                    },function () {
                        heart=heart+1;
                        heartNumber(heart);
                        useProp($('#prop2Dv').val())
                        layer.close(confirm3);
                    }
                    ,function(){
                        layer.close(confirm3);
                    })
            }
        }
    })


    $('#prop4Dv').click(function () {
        if ($('#FullBloodNumber').text()==='0'){
            layer.msg('道具数量为零，无法使用')
        }
        else {
            if (heart===3){
                layer.msg('您的血量健康，无需使用满血卡')
            }
            else if (heart<3){
                let confirm5=layer.confirm('是否使用万能血袋(可以恢复全部血量)', {
                        title:'道具卡使用',btn: ['确定','取消'],anim:1,resize:false
                    },function () {
                        heart=3;
                        heartNumber(heart);
                        useProp($('#prop4Dv').val());
                        layer.close(confirm5);
                    }
                    ,function(){
                        layer.close(confirm5);
                    })
            }
        }
    })


    $('#prop5Dv').click(function () {
        layer.msg('复活卡无法主动使用，将会在您失败时询问是否使用')
    })


    $('#CoverFloor').on("click","#receivedTreasure",function(){
        playMusic();
        TreasureShow();
    })

    function welcomeShow() {
        $.ajax({
            url: '/endless-info/openGame/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.msg==='0'){
                    $('#start').text('开始挑战')
                }
                else if (res.msg==='1'){
                    $('#start').text('继续上次挑战')
                }
                else if (res.msg==='2'){
                    layer.msg('由于您近期异常退出，您的血量减少一滴!请注意',{time:1500})
                    $('#start').text('继续上次挑战')
                }
                else if (res.msg==='3'){
                    layer.msg('由于您异常退出，最后机会已被扣除，结算此次挑战!',{time:1500})
                    $('#start').text('开始挑战')
                }
                $('#highestRecording').text(res.data.highestRecord)
                $('#nowRecording').text(res.data.nowLevel)
            }
        })
    }


    function questionShow() {
            $.ajax({
                url: '/endless-info/getQuestion/'+sessionStorage.getItem('userId'),
                method: 'GET',
                contentType: 'application/json',
                success: function (res) {
                    $('#Checkup').text(res.data.nowLevel);
                    $('#question').text(res.data.questionTitle);
                    $('#answer1').text(res.data.answer1);
                    $('#answer2').text(res.data.answer2);
                    $('#answer3').text(res.data.answer3);
                    $('#answer4').text(res.data.answer4);
                    heartNumber(res.data.errorNum);
                    heart=res.data.errorNum;
                    questionId=res.data.id;
                    $('#countdown').text(res.data.nowTime);
                    timeDown=res.data.nowTime;
                    answerType=0;
                    Countdown(timeDown);
                    propShow();
                    progressNumber=res.data.nowLevel%10;
                    if (progressNumber===0){
                        answerType=1;
                        $('#CoverFloor').css('display','block')
                        .css('background','rgba(255, 255, 255, 0.6)')
                        let CoverFloor=document.getElementById('CoverFloor')
                        let CoverFloorImg ='<div style="width:650px;height: 650px;margin: 150px auto 0">' +
                            '<img src="img/Treasure.png" id="receivedTreasure" alt="" style="cursor: pointer"></div>';
                        CoverFloor.innerHTML = CoverFloorImg;
                    }
                    TreasureProgressShow();
                }
            })
    }

    function propShow() {
        $.ajax({
            url: '/bag-content/listMyProps/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success:function (res) {
                $('#DelayNumber').text(res.data[0].amount)
                $('#Delay').attr('src','http://localhost:8088/'+res.data[0].goodsImage)
                $('#prop1Dv').val(res.data[0].goodsId)

                $('#AddBloodNumber').text(res.data[1].amount)
                $('#AddBlood').attr('src','http://localhost:8088/'+res.data[1].goodsImage)
                $('#prop3Dv').val(res.data[1].goodsId)

                $('#JumpCheckupNumber').text(res.data[2].amount)
                $('#JumpCheckup').attr('src','http://localhost:8088/'+res.data[2].goodsImage)
                $('#prop2Dv').val(res.data[2].goodsId)

                $('#FullBloodNumber').text(res.data[3].amount)
                $('#FullBlood').attr('src','http://localhost:8088/'+res.data[3].goodsImage)
                $('#prop4Dv').val(res.data[3].goodsId)

                $('#ResurrectionNumber').text(res.data[4].amount)
                $('#Resurrection').attr('src','http://localhost:8088/'+res.data[4].goodsImage)
                $('#prop5Dv').val(res.data[4].goodsId)
            }
        })
    }

    function TreasureProgressShow() {
        if (progressNumber===0){
            $('#TreasureProgress').animate({
                height: '100%'
            },500)
        }
        else {
            $('#TreasureProgress').animate({
                height: progressNumber*10+'%'
            },500)
        }
    }



    function TOrF(answer) {
        $.ajax({
            url: '/endless-info/trueOrFalse',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                questionId:questionId,
                answer:answer
            }),
            success: function (res) {
                if (res.code===200){
                    answerType=1;
                    layer.msg('回答正确,继续下一题',{time:1000},function () {
                        questionShow();
                        $('#CoverFloor').css('display','none')
                        })
                }
                else if (res.code===400){
                    answerType=1;
                    layer.msg('回答错误，正确答案是'+res.data,{time:1500},function () {
                        if (res.msg==='0'){
                            ReturnLife();
                        }
                        else if (res.msg==='-1'){
                            layer.msg('回答错误....扣除一滴血，重闯此关',{time:1500},function () {
                                questionShow();
                                $('#CoverFloor').css('display','none')
                            })
                        }

                    })
                }
            }
        })
    }

    function sendError() {
        $.ajax({
            url: '/endless-info/trueOrFalse',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                questionId:questionId,
                answer:'X'
            })
        })
    }

    
    function Countdown(time) {
        timeDown=time
        if(timeDown===0){
            sendError();
            if(heart>0){
                layer.msg('回答超时...扣除一滴血，重闯此关',{time:1500},function () {
                    answerType=1
                    Countdown(30)
                    questionShow();
                });
            }
            if(heart===0){
                ReturnLife();
            }
        }
        else if (answerType===1){
            $('#countdown').text(timeDown)
        }
        else {
            setTimeout(function () {
                timeDown=timeDown-1
                Countdown(timeDown)
                $('#countdown').text(timeDown)
            },1000);
        }
    }

    function heartNumber(Number) {
        let template=''
        let Frequency=document.getElementById('frequency')
        let templateStr ='<img src="img/heart.png" alt="" class="heartPhoto">';
        for (let i=0;i<Number;i++){
            template=template+templateStr
        }
            Frequency.innerHTML = template;
    }

    function returnTime(returnNumber) {
        answerType=1;
        if (returnNumber===0){
            answerType=0
            Countdown(timeDown)
        }
        else if (returnNumber>0){
            setTimeout(function () {
                returnNumber=returnNumber-1
                timeDown=timeDown+1
                $('#countdown').text(timeDown)
                returnTime(returnNumber);
            },50)
        }
    }

    function PullOut() {
        if (propDvType===0){
            $('#propsDv').animate({
                marginLeft: '-160px',
            },500)
            $('#propPart2').animate({
                width: '80px'
            },500)
            $('#pullOutDv').css('margin','110px 0 0 0')
                .css('border-width','20px 0 20px 15px')
                .css('borderColor','transparent transparent transparent rgb(138, 201, 106)')
            propDvType=1
        }
        else if (propDvType===1){
            $('#propsDv').animate({
                marginLeft: '-80px',
            },500)
            $('#propPart2').animate({
                width: '0'
            },500)
            $('#pullOutDv').css('margin','110px 0 0 -15px',)
                .css('border-width','20px 15px 20px 0')
                .css('borderColor','transparent rgb(138, 201, 106) transparent transparent')
            propDvType=0
        }
    }


    function useProp(goodsId) {
        $.ajax({
            url: '/bag-content/usePropsOfLevel',
            method: 'POST',
            contentType: 'application/json',
            data:JSON.stringify({
                userId:sessionStorage.getItem('userId'),
                goodsId:goodsId
            }),
            success: function () {
                propShow();
            }
        })
    }

    function playMusic(){
        let audio = document.getElementById('music');
        audio.play();
    }


    function ReturnLife() {
        let HorD = $('#prop5Dv').val()
        if (HorD!==0){
           let confirm6= layer.confirm('您现在有复活卡...是否使用'
                ,function () {
                   $.ajax({
                       url: '/bag-content/usePropsOfLevel',
                       method: 'POST',
                       contentType: 'application/json',
                       data:JSON.stringify({
                           userId:sessionStorage.getItem('userId'),
                           goodsId:HorD
                       }),
                       success: function(){
                           layer.msg('复活卡使用成功',{time:1500},function () {
                               questionShow();
                               $('#CoverFloor').css('display','none')
                           })
                       }
                   })
               layer.close(confirm6)
                }
                ,function () {
               layer.close(confirm6)
                   welcomeShow();
                   $('#welcomeContent').slideDown(600);
                   $('#welcomeDv').fadeIn(800,function () {
                       $('#CoverFloor').css('display','none')
                   });
                   $('#endlessStartDv').fadeOut(400);
                })
        }
    }
    
    function TreasureShow() {
        let CoverFloor=document.getElementById('CoverFloor');
        let NewCoverFloor='<div id="MsgDv" onclick="MsgDvClick()">\n' +
            '    <div id="Msg">\n' +
            '        <div id="MsgTip1Dv">\n' +
            '            <span style="font-size: 1.4em">恭喜您获得</span>\n' +
            '        </div>\n' +
            '        <div id="MsgPictureDv">\n' +
            '            <img src="../img/jinbi.png" id="MsgPicture" class="MsgPicture">\n' +
            '        </div>' +
            '        <div id="MsgNumberDv">' +
            '             <b id="MsgNumber" style="font-size: 1.6em"></b><b style="font-size: 1.6em">金币</b>\n' +
            '       </div>' +
            '        <div id="MsgTip2Dv">\n' +
            '            <span style="font-size: 1.4em">点击任意地方关闭弹窗</span>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '</div>';
        $('#CoverFloor').empty();
        CoverFloor.innerHTML=NewCoverFloor;
        $.ajax({
            url: '/endless-info/myBox/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                $(MsgNumber).text(res.msg)
            }
        })
    }

    function MsgDvClick(){
        $('#CoverFloor').empty().css('display','none').css('background','');
    }


</script>
</body>
</html>